<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-form-item
              :label="$t('table.keyword')"
              size="small"
              prop="keyword"
            >
              <el-input
                @keyup.enter="handleFilter"
                style="width: 200px;"
                :placeholder="$t('table.searchByNumber')"
                v-model="requestParameters.keyword"
              ></el-input>
              <!-- 搜索按钮 -->
              <el-button
                size="small"
                class="formBtn"
                type="primary"
                @click="handleFilter"
                >{{ $t("table.search") }}</el-button
              >
              <!-- 重置按钮 -->
              <el-button size="small" class="formBtn" @click="resetForm">{{
                $t("table.clear")
              }}</el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- end -->
        <!-- 信息提示栏 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据 -->
        <el-table :data="dataList" fit style="width: 100%">
          <!-- 编号 -->
          <el-table-column
            align="center"
            :label="$t('table.number')"
            prop="id"
            width="200"
          >
          </el-table-column>
          <!-- 题型 -->
          <el-table-column align="center" :label="$t('table.questionType')">
            <template #default="{row}">
              <span>{{ formatQuestionType(row.questionType) }}</span>
            </template>
          </el-table-column>
          <!-- 题目编号 -->
          <el-table-column
            :label="$t('table.questionIDs')"
            width="200"
            align="center"
          >
            <template #default="{row}">
              <el-link
                type="primary"
                v-for="ids in row.questionIDs"
                :key="ids.number"
                @click="questionPreview(ids.id)"
                >{{ ids.number }}</el-link
              >
            </template>
          </el-table-column>
          <!-- 录入时间 -->
          <el-table-column
            align="center"
            :label="$t('table.addTime')"
            prop="addTime"
            width="180"
          >
          </el-table-column>
          <!-- 答题时间 -->
          <el-table-column
            align="center"
            :label="$t('table.totalSeconds')"
            prop="totalSeconds"
          >
          </el-table-column>
          <!-- 正确率 -->
          <el-table-column
            align="center"
            :label="$t('table.accuracyRate')"
            prop="accuracyRate"
          >
          </el-table-column>
          <!-- 录入人 -->
          <el-table-column
            align="center"
            :label="$t('table.setter')"
            prop="userName"
          >
          </el-table-column>
          <!-- 删除按钮 -->
          <el-table-column
            align="center"
            :label="$t('table.actions')"
            class-name="small-padding fixed-width"
          >
            <template #default="{row}">
              <el-button
                v-if="row.status != 'deleted'"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="handleRemove(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(requestParameters.page)"
            :total="Number(total)"
            :page-size="Number(requestParameters.pagesize)"
            :page-sizes="[10, 20, 30, 50]"
            layout="sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
        <!-- end -->
        <!-- 试题预览对话框 -->
        <QuestionPreview
          :is-preview="isPreview"
          :cur-id="curId"
          @close-preview="closePreview"
        />
        <!-- end -->
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入获取和删除题组列表的请求函数
import { randoms, removeRandoms } from "@/api/hmmm/questions";
// 引入试题预览组件
import QuestionPreview from "./../components/questions-preview.vue";
export default {
  name: "questions-randoms",
  components: { QuestionPreview },
  data() {
    return {
      dataList: [], //当前页题组列表数据
      total: null, //题组总数
      isPreview: false, //试题预览对话框是否开启
      curId: null, //要查看详情的题目id
      requestParameters: {
        page: 1,
        pagesize: 20,
        keyword: ""
      } //请求题组列表接口用到的数据
    };
  },
  computed: {
    //提示栏文字
    alertText() {
      return this.$t("table.totalItems", [this.total]);
    }
  },
  methods: {
    // 获取列表数据
    getList() {
      randoms(this.requestParameters)
        .then(({ data: res }) => {
          // console.log(res);
          this.dataList = res.items;
          this.total = res.counts;
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 题型数据处理
    formatQuestionType(n) {
      const map = {
        1: this.$t("question.singleChoice"),
        2: this.$t("question.multipleChoice"),
        3: this.$t("question.shortAnswer")
      };
      return map[n];
    },
    // 重置
    resetForm() {
      this.$refs.requestParameters.resetFields();
      this.getList();
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1;
      this.getList();
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val;
      // 回到第一页重新查询
      this.requestParameters.page = 1;
      this.getList(this.requestParameters);
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val;
      this.getList();
    },
    // **********************************
    // 删除
    handleRemove(data) {
      this.$confirm("此操作将永久删除该题组 " + ", 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          removeRandoms(data)
            .then(response => {
              this.$message.success("成功删除了题组！");
              this.getList();
            })
            .catch(response => {
              this.$message.error("删除失败!");
            });
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
    // 预览题目
    questionPreview(id) {
      this.curId = id;
      this.isPreview = true;
    },
    // 关闭预览
    closePreview() {
      this.isPreview = false;
    }
  },
  mounted() {
    // 读取数据
    this.getList();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.filter-container {
  padding-left: 20px;
  .formBtn {
    float: right;
    margin-left: 10px;
  }
}
</style>
